.city {
	position: relative;
	width: 8px;
	height: 8px;
	margin: 100px auto;
}

.city .dotted {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #09f;
	opacity: 0.8;
}

.city div[class^=pulse] {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	box-shadow: 0 0 12px #009dfd;
	border-radius: 50%;
	animation: pulse 1.2s linear infinite;
}

.city div.pulse2 {
	animation-delay: 0.4s;
}

.city div.pulse3 {
	animation-delay: 0.8s;
}

.city div.pulse4 {
	animation-delay: 1.2s;
}

.city div.pulse5 {
	animation-delay: 1.6s;
}

@keyframes pulse {
	0 {}

	60% {
		width: 40px;
		height: 40px;
		opacity: 1;
		/* 必须写，因为后面需要用到*/
	}

	90% {
		width: 60px;
		height: 60px;
		opacity: 0.4;
	}

	100% {
		width: 70px;
		height: 70px;
		opacity: 0;
	}
}
